<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="button" value="⏲" id="btn01">
    <!-- 3. 数码时钟 -->
    <img id="h1"> <img id="m1"> <img id="s1">
    <img id="h2"> <img id="m2"> <img id="s2">
    <script>

        function $(id) {
            return document.getElementById(id)
        }
        var result = 0;
        $("btn01").onclick = function () {
            result = setInterval(shiZhong, 1000)
        }
        function shiZhong() {
            var d = new Date();
            h1 = parseInt(d.getHours() / 10);
            h2 = parseInt(d.getHours() % 10);
            m1 = parseInt(d.getMinutes() / 10);
            m2 = parseInt(d.getMinutes() % 10);
            s1 = parseInt(d.getSeconds() / 10);
            s2 = parseInt(d.getSeconds() % 10);
            $("h1").src = "images/" + h1 + ".jpg";
            $("h2").src = "images/" + h2 + ".jpg";
            $("m1").src = "images/" + m1 + ".jpg";
            $("m2").src = "images/" + m2 + ".jpg";
            $("s1").src = "images/" + s1 + ".jpg";
            $("s2").src = "images/" + s2 + ".jpg";
        }
    </script>
</body>

</html>